{% extends "member/layout.html" %}

{% block title %}我的项目{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <!-- 页面标题和操作按钮 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h3 class="fw-bold text-primary mb-1">
                    <i class="fas fa-folder-open me-2"></i>
                    {% if current_member.has_permission('MANAGE_PROJECTS') %}我的项目{% else %}我参与的项目{% endif %}
                </h3>
                <p class="text-muted mb-0">
                    {% if current_member.has_permission('MANAGE_PROJECTS') %}管理您创建和参与的所有项目{% else %}查看您参与的项目和任务{% endif %}
                </p>
            </div>
            <div class="d-flex">
                {% if current_member.has_permission('MANAGE_PROJECTS') %}
                <a href="{{ url_for('member.jira.create_project') }}" class="btn btn-primary me-2">
                    <i class="fas fa-plus-circle me-2"></i>新建项目
                </a>
                <a href="{{ url_for('member.jira.list_projects', status='pending_review') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-clock me-2"></i>待审核项目
                </a>
                {% endif %}
            </div>
        </div>

        <!-- 项目统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-2 col-6 mb-3">
                <div class="card dashboard-card border-0 h-100">
                    <div class="card-body text-center">
                        <h3 class="stat-number text-primary mb-1">{{ projects|length }}</h3>
                        <p class="text-muted small mb-0">全部项目</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-6 mb-3">
                <div class="card dashboard-card border-0 h-100">
                    <div class="card-body text-center">
                        <h3 class="stat-number text-warning mb-1">{{ projects|selectattr('status', 'equalto', 'pending_review')|list|length }}</h3>
                        <p class="text-muted small mb-0">待审核</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-6 mb-3">
                <div class="card dashboard-card border-0 h-100">
                    <div class="card-body text-center">
                        <h3 class="stat-number text-info mb-1">{{ projects|selectattr('status', 'equalto', 'approved')|list|length }}</h3>
                        <p class="text-muted small mb-0">已批准</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-6 mb-3">
                <div class="card dashboard-card border-0 h-100">
                    <div class="card-body text-center">
                        <h3 class="stat-number text-primary mb-1">{{ projects|selectattr('status', 'equalto', 'in_progress')|list|length }}</h3>
                        <p class="text-muted small mb-0">进行中</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-6 mb-3">
                <div class="card dashboard-card border-0 h-100">
                    <div class="card-body text-center">
                        <h3 class="stat-number text-success mb-1">{{ projects|selectattr('status', 'equalto', 'completed')|list|length }}</h3>
                        <p class="text-muted small mb-0">已完成</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-6 mb-3">
                <div class="card dashboard-card border-0 h-100">
                    <div class="card-body text-center">
                        <h3 class="stat-number text-secondary mb-1">{{ projects|selectattr('status', 'equalto', 'draft')|list|length }}</h3>
                        <p class="text-muted small mb-0">草稿</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 项目列表 -->
        <div class="card dashboard-card border-0">
            <!-- 标签页导航 -->
            <div class="card-header bg-transparent border-0 pb-0">
                <ul class="nav nav-tabs nav-tabs-custom border-0" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {% if status_filter == 'all' %}active{% endif %}"
                           href="{{ url_for('member.jira.list_projects', status='all') }}">
                            <i class="fas fa-list-check me-2"></i>全部
                            <span class="badge bg-primary bg-opacity-10 text-primary rounded-pill ms-2">{{ projects|length }}</span>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {% if status_filter == 'draft' %}active{% endif %}"
                           href="{{ url_for('member.jira.list_projects', status='draft') }}">
                            <i class="fas fa-edit me-2"></i>草稿
                            <span class="badge bg-secondary bg-opacity-10 text-secondary rounded-pill ms-2">{{ projects|selectattr('status', 'equalto', 'draft')|list|length }}</span>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {% if status_filter == 'pending_review' %}active{% endif %}"
                           href="{{ url_for('member.jira.list_projects', status='pending_review') }}">
                            <i class="fas fa-clock me-2"></i>待审核
                            <span class="badge bg-warning bg-opacity-10 text-warning rounded-pill ms-2">{{ projects|selectattr('status', 'equalto', 'pending_review')|list|length }}</span>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {% if status_filter == 'rejected' %}active{% endif %}"
                           href="{{ url_for('member.jira.list_projects', status='rejected') }}">
                            <i class="fas fa-times-circle me-2"></i>已拒绝
                            <span class="badge bg-danger bg-opacity-10 text-danger rounded-pill ms-2">{{ projects|selectattr('status', 'equalto', 'rejected')|list|length }}</span>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {% if status_filter == 'cancelled' %}active{% endif %}"
                           href="{{ url_for('member.jira.list_projects', status='cancelled') }}">
                            <i class="fas fa-ban me-2"></i>已取消
                            <span class="badge bg-dark bg-opacity-10 text-dark rounded-pill ms-2">{{ projects|selectattr('status', 'equalto', 'cancelled')|list|length }}</span>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {% if status_filter == 'approved' %}active{% endif %}"
                           href="{{ url_for('member.jira.list_projects', status='approved') }}">
                            <i class="fas fa-check-circle me-2"></i>已批准
                            <span class="badge bg-info bg-opacity-10 text-info rounded-pill ms-2">{{ projects|selectattr('status', 'equalto', 'approved')|list|length }}</span>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {% if status_filter == 'in_progress' %}active{% endif %}"
                           href="{{ url_for('member.jira.list_projects', status='in_progress') }}">
                            <i class="fas fa-spinner me-2"></i>进行中
                            <span class="badge bg-primary bg-opacity-10 text-primary rounded-pill ms-2">{{ projects|selectattr('status', 'equalto', 'in_progress')|list|length }}</span>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {% if status_filter == 'completed' %}active{% endif %}"
                           href="{{ url_for('member.jira.list_projects', status='completed') }}">
                            <i class="fas fa-flag-checkered me-2"></i>已完成
                            <span class="badge bg-success bg-opacity-10 text-success rounded-pill ms-2">{{ projects|selectattr('status', 'equalto', 'completed')|list|length }}</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="card-body">
                {% if projects %}
                <div class="row">
                    {% for project in projects %}
                    <div class="col-lg-6 col-xl-4 mb-4">
                        <div class="card project-card border-0 h-100">
                            <div class="card-body d-flex flex-column" style="min-height: 400px;">
                                <!-- 项目头部 -->
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div>
                                        <span class="badge status-badge bg-{{
                                            'secondary' if project.status == 'draft'
                                            else 'warning' if project.status == 'pending_review'
                                            else 'danger' if project.status == 'rejected'
                                            else 'dark' if project.status == 'cancelled'
                                            else 'info' if project.status == 'approved'
                                            else 'primary' if project.status == 'in_progress'
                                            else 'success'
                                        }} bg-opacity-10 text-{{
                                            'secondary' if project.status == 'draft'
                                            else 'warning' if project.status == 'pending_review'
                                            else 'danger' if project.status == 'rejected'
                                            else 'dark' if project.status == 'cancelled'
                                            else 'info' if project.status == 'approved'
                                            else 'primary' if project.status == 'in_progress'
                                            else 'success'
                                        }} border border-{{
                                            'secondary' if project.status == 'draft'
                                            else 'warning' if project.status == 'pending_review'
                                            else 'danger' if project.status == 'rejected'
                                            else 'dark' if project.status == 'cancelled'
                                            else 'info' if project.status == 'approved'
                                            else 'primary' if project.status == 'in_progress'
                                            else 'success'
                                        }} border-opacity-25 rounded-pill px-3 py-1">
                                            <i class="fas {{
                                                'fa-edit' if project.status == 'draft'
                                                else 'fa-clock' if project.status == 'pending_review'
                                                else 'fa-times-circle' if project.status == 'rejected'
                                                else 'fa-ban' if project.status == 'cancelled'
                                                else 'fa-check-circle' if project.status == 'approved'
                                                else 'fa-spinner' if project.status == 'in_progress'
                                                else 'fa-flag-checkered'
                                            }} me-1"></i>
                                            {{ project.status_label }}
                                        </span>
                                    </div>
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-light rounded-circle" type="button" data-bs-toggle="dropdown">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li><a class="dropdown-item" href="{{ url_for('member.jira.project_detail', project_id=project.id) }}">
                                                <i class="fas fa-eye me-2"></i>查看详情
                                            </a></li>
                                            {% if project.status in ['draft', 'rejected'] and current_member.id == project.owner_id %}
                                            <li><a class="dropdown-item" href="{{ url_for('member.jira.edit_project', project_id=project.id) }}">
                                                <i class="fas fa-edit me-2"></i>编辑项目
                                            </a></li>
                                            {% endif %}
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item text-warning" href="#">
                                                <i class="fas fa-star me-2"></i>标记重要
                                            </a></li>
                                        </ul>
                                    </div>
                                </div>

                                <!-- 项目信息 -->
                                <div class="mb-3 flex-grow-1">
                                    <h5 class="fw-bold text-dark mb-2">
                                        <a href="{{ url_for('member.jira.project_detail', project_id=project.id) }}" class="text-decoration-none text-dark">
                                            {{ project.name }}
                                        </a>
                                    </h5>
                                    {% if project.description %}
                                    <p class="text-muted small mb-0">{{ project.description[:100] }}{% if project.description|length > 100 %}...{% endif %}</p>
                                    {% endif %}
                                </div>

                                <!-- 项目统计 -->
                                <div class="row text-center mb-3">
                                    <div class="col-4">
                                        <div class="border-end">
                                            <h6 class="mb-0 fw-bold text-primary">{{ project.tasks|length if project.tasks else 0 }}</h6>
                                            <small class="text-muted">任务</small>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="border-end">
                                            <h6 class="mb-0 fw-bold text-info">{{ project.members|length if project.members else 1 }}</h6>
                                            <small class="text-muted">成员</small>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <h6 class="mb-0 fw-bold text-success">
                                            {{ project.tasks|selectattr('status', 'equalto', 'completed')|list|length if project.tasks else 0 }}/{{ project.tasks|length if project.tasks else 0 }}
                                        </h6>
                                        <small class="text-muted">完成</small>
                                    </div>
                                </div>

                                <!-- 时间信息 -->
                                <div class="d-flex justify-content-between align-items-center text-muted small mb-3">
                                    <div>
                                        <i class="fas fa-calendar-plus me-1"></i>
                                        {{ project.created_at.strftime('%Y-%m-%d') }}
                                    </div>
                                    <div>
                                        <i class="fas fa-clock me-1"></i>
                                        {{ project.created_at.strftime('%H:%M') }}
                                    </div>
                                </div>

                                <!-- 操作按钮 -->
                                <div class="d-grid gap-2 mt-auto">
                                    <a href="{{ url_for('member.jira.project_detail', project_id=project.id) }}"
                                       class="btn btn-outline-primary">
                                        <i class="fas fa-external-link-alt me-2"></i>查看详情
                                    </a>
                                    {% if project.status in ['draft', 'rejected'] and current_member.id == project.owner_id %}
                                    <a href="{{ url_for('member.jira.edit_project', project_id=project.id) }}"
                                       class="btn btn-outline-warning">
                                        <i class="fas fa-edit me-2"></i>编辑项目
                                    </a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <!-- 空状态 -->
                    <div class="text-center py-5">
                        <div class="mb-4">
                            <i class="fas fa-folder-open text-muted" style="font-size: 4rem;"></i>
                        </div>
                        <h5 class="text-muted mb-3">
                    {% if current_member.has_permission('MANAGE_PROJECTS') %}暂无项目{% else %}暂无参与的项目{% endif %}
                </h5>
                <p class="text-muted mb-4">
                    {% if current_member.has_permission('MANAGE_PROJECTS') %}
                    您当前没有创建或参与任何项目，点击下方按钮创建第一个项目
                    {% else %}
                    您当前没有参与任何项目
                    {% endif %}
                </p>
                {% if current_member.has_permission('MANAGE_PROJECTS') %}
                <a href="{{ url_for('member.jira.create_project') }}" class="btn btn-primary">
                    <i class="fas fa-plus-circle me-2"></i>新建项目
                </a>
                {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<style>
.project-card {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    height: 100%;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    border-left-color: var(--primary-color);
    border-color: #dee2e6;
}

.nav-tabs-custom .nav-link {
    border: none;
    border-radius: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 0.75rem 1.25rem;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-tabs-custom .nav-link.active {
    background-color: rgba(67, 97, 238, 0.1);
    color: var(--primary-color);
}

.nav-tabs-custom .nav-link:hover:not(.active) {
    background-color: rgba(108, 117, 125, 0.1);
}

.status-badge {
    font-weight: 500;
    font-size: 0.8rem;
}

.dropdown-toggle::after {
    display: none;
}

.btn-light.rounded-circle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.stat-number {
    font-size: 1.8rem;
    font-weight: 700;
}

.card-body .row .col-4 {
    border-right: 1px solid #e9ecef;
}

.card-body .row .col-4:last-child {
    border-right: none;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 添加卡片悬停效果
    const projectCards = document.querySelectorAll('.project-card');

    projectCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.zIndex = '10';
        });

        card.addEventListener('mouseleave', function() {
            this.style.zIndex = '1';
        });
    });

    // 处理重要标记
    const importantButtons = document.querySelectorAll('.dropdown-item.text-warning');

    importantButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const card = this.closest('.project-card');
            card.style.borderLeftColor = '#ffc107';

            // 显示提示
            const toast = document.createElement('div');
            toast.className = 'toast align-items-center text-white bg-warning border-0 position-fixed bottom-0 end-0 m-3';
            toast.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">
                        <i class="fas fa-star me-2"></i>已标记为重要项目
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            `;
            document.body.appendChild(toast);

            const bsToast = new bootstrap.Toast(toast);
            bsToast.show();

            // 3秒后移除提示
            setTimeout(() => {
                toast.remove();
            }, 3000);
        });
    });

    // 标签页滚动功能（针对小屏幕）
    const navTabs = document.querySelector('.nav-tabs-custom');
    if (navTabs) {
        navTabs.addEventListener('wheel', function(e) {
            if (e.deltaY !== 0) {
                e.preventDefault();
                this.scrollLeft += e.deltaY;
            }
        });
    }
});
</script>
{% endblock %}